<template>
  <PopUps :bgIndex="1000" :boxIndex="1001" widthMy='60%'  height-my="78%">
    <div class="popups-box">
      <div class="header">
        <div class="header-top">
          <h3>新增公告</h3>
          <i class="iconfont icon-icon-cross-empty" @click="closePopUps"></i>
        </div>
        <div class="headerMain">
          <el-form :model="form" label-width="auto" :rules="rules" style="max-width: 600px" ref="formRef">
            <el-form-item label="公告名称：">
              <el-input v-model="form.noticeName" />
            </el-form-item>
            <el-form-item label="所属类别：">
              <el-select v-model="form.noticeType" placeholder="请选择公告类别">
                <el-option label="活动" value="0" />
                <el-option label="消息" value="1" />
                <el-option label="通知" value="2" />
                <el-option label="预警" value="3" />
              </el-select>
            </el-form-item>
            <el-form-item label="公告日期：">
              <el-date-picker v-model="form.noticeDate" type="date" placeholder="请选择公告日期" clearable />
            </el-form-item>
            <el-form-item label="是否公开：">
              <el-switch v-model="form.public" />
            </el-form-item>
            <el-form-item label="公告内容：">
              <div style="border: 1px solid #ccc">
                <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
                  :mode="mode" />
                <Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml" :defaultConfig="editorConfig"
                  :mode="mode" @onCreated="handleCreated" />
              </div>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">Create</el-button>
              <el-button>Cancel</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </PopUps>
</template>
<script setup>
import PopUps from '@/components/My/PopUps';
import { reactive, ref, defineEmits, defineProps,shallowRef, onMounted ,onBeforeUnmount } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";

const emit = defineEmits(['popUpsFlase'])
const formRef = ref(null)
let props = defineProps(['defindFlag', 'PopData'])
const form = reactive({
  noticeName: '',
  noticeType: '',
  noticeDate: '',
  public: false,
  noticeContent: '',
})
// 入库信息校验
const rules = reactive({
  noticeName: [
    {
      required: true,
      message: '公告名称',
      trigger: 'change',
    }
  ],
  noticeType: [
    {
      required: true,
      message: '所属类别',
      trigger: 'change',
    }
  ],
  noticeDate: [
    {
      required: true,
      message: '公告日期',
      trigger: 'change',
    }
  ],
  public: [
    {
      required: true,
      message: '是否公开',
      trigger: 'change',
    }
  ],
  noticeContent: [
    {
      required: true,
      message: '公告内容',
      trigger: 'change',
    }
  ],

})
// 底部校验
const rules1 = reactive({
  paymentMoney: [
    {
      required: true,
      message: '付款金额',
      trigger: 'change',
    }
  ],
  paymentMethods: [
    {
      required: true,
      message: '付款方式',
      trigger: 'change',
    },
  ],
})

// 新增
const onSubmit = (formRef, formRef1) => {
  ElMessageBox.confirm(
    '确认新增吗?',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'success',
    }
  ).then(async () => {
    if (!formRef) return
    let isrules = await formRef.validate((valid, fields) => {
      if (valid) {
        return true
      } else {
        return false
      }
    })
    let isrules1 = await formRef1.validate((valid, fields) => {
      if (valid) {
        return true
      } else {
        return false
      }
    })
    if (isrules && isrules1) {
      // 请求接口
      console.log(popUpsForm.value, tableData.value, stockroomForm.value);
    }
  })
    .catch(() => {
      ElMessage({
        type: 'warning',
        message: '已取消',
      })
    })

}
// 关闭
const closePopUps = () => {
  emit('popUpsFlase', false)
}



// 富文本
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();

// 内容 HTML
const valueHtml = ref("<p>hello</p>");

// 模拟 ajax 异步获取内容
onMounted(() => {
  setTimeout(() => {
    valueHtml.value = "<p>模拟 Ajax 异步设置内容</p>";
  }, 1500);
});

const toolbarConfig = {};
const editorConfig = { placeholder: "请输入内容..." };

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};

</script>

<style lang="scss" scoped>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}

.el-input__wrapper {
  --el-select-width: 220px;
}

:deep(.el-form-item) {
  width: 250px;
}

:deep(.el-form-item__label) {
  width: 150px;
  text-align: right;
}

@mixin publicH3 {
  font-weight: 550;
  position: relative;
  font-size: 16px !important;

  &::after {
    content: '';
    width: 5px;
    height: 20px;
    background-color: #1947FF;
    border-radius: 5px;
    position: absolute;
    left: -15px;
    top: 0px;
  }
}

@mixin titlePadding {
  padding: 25px 25px 25px 45px;
}

@mixin pubilcForm {
  :deep(.el-form-item) {
    margin-right: 30px !important;
  }

  :deep(.el-form-item__label) {
    font-size: 14px;
  }

  :deep(.el-input__wrapper) {
    width: 132px;
  }

  :deep(.el-date-editor--datetimerange) {
    width: 240px;
  }

  :deep(.el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th) {
    font-size: 15px !important;
  }
}

.popups-box {
  max-height: 650px;
  overflow-y: scroll;

  .header {
    .header-top {
      @include titlePadding;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: sticky;
      top: 0px;
      background-color: #fff;
      z-index: 2023;

      h3 {
        @include publicH3;
      }

      .iconfont {
        color: #666;
        font-size: 27px;
      }
    }

    .headerMain {
      .demo-form-inline {
        @include pubilcForm;
      }
    }
  }

  .main {
    .main-top {
      @include titlePadding;

      h3 {
        @include publicH3;
      }
    }

    .mainContent {
      padding: 20px;

      .remarks {
        width: 400px;
      }

      .addTable {
        width: 100%;
        text-align: right;
        margin: 20px 0;
        color: #1947FF;
        cursor: pointer;
      }

      .demo-form-inline {
        margin-top: 20px;
        @include pubilcForm;

      }

      .btn {
        text-align: right;

        .el-button {
          width: 50px;
          height: 25px;
          font-size: 12px;
        }

        .reset {
          background-color: #E4E9FC;
          color: #333;
          border: none;
        }
      }
    }
  }
}
</style>